<template>
  <div>
    <el-card class="top">
      <div class="cardLeft">
        <el-avatar
          style="margin-right: 26px"
          :size="75"
          :src="userInfo.avatar"
        />
        <div class="description">
          <h3>{{ userInfo.name }} 今天又是活力充沛的一天</h3>
          <span>这里是天气未开发</span>
        </div>
      </div>
      <div class="cardRight"></div>
    </el-card>
    <!-- 卡片 -->
    <div class="card">
      <el-card>
        <span class="card-name">访问量</span>
        <span class="card-count">3290</span>
      </el-card>
      <el-card>
        <span class="card-name">访问量</span>
        <span class="card-count">3290</span>
      </el-card>
      <el-card>
        <span class="card-name">访问量</span>
        <span class="card-count">3290</span>
      </el-card>
      <el-card>
        <span class="card-name">访问量</span>
        <span class="card-count">3290</span>
      </el-card>
    </div>
    <!-- 图表 -->
    <div class="echars">
      <el-card style="width: 59%">
        <div id="char1" style="width: 100%; height: 500px"></div>
      </el-card>
      <el-card style="width: 40%">
        <div id="char2" style="width: 100%; height: 500px"></div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import useUserStore from '@/store/modules/user.ts'
let useStore = useUserStore()
const userInfo = reactive({
  name: useStore.name ?? 'admin',
  avatar: 'http://localhost:3000' + useStore.avatar,
})
//echars
import * as echarts from 'echarts'
onMounted(async () => {
  nextTick(() => {
    var chartDom1 = document.getElementById('char1')
    var myChart1 = echarts.init(chartDom1)
    myChart1.setOption(option1)
    var chartDom2 = document.getElementById('char2')
    var myChart2 = echarts.init(chartDom2)
    myChart2.setOption(option2)
  })
})

var option1 = {
  title: {
    text: 'Stacked Area Chart',
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985',
      },
    },
  },
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
  },
  toolbox: {
    feature: {
      saveAsImage: {},
    },
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
  ],
  yAxis: [
    {
      type: 'value',
    },
  ],
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series',
      },
      data: [120, 132, 101, 134, 90, 230, 210],
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series',
      },
      data: [220, 182, 191, 234, 290, 330, 310],
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series',
      },
      data: [150, 232, 201, 154, 190, 330, 410],
    },
    {
      name: 'Direct',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series',
      },
      data: [320, 332, 301, 334, 390, 330, 320],
    },
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      label: {
        show: true,
        position: 'top',
      },
      areaStyle: {},
      emphasis: {
        focus: 'series',
      },
      data: [820, 932, 901, 934, 1290, 1330, 1320],
    },
  ],
}
var option2 = {
  tooltip: {
    trigger: 'item',
  },
  legend: {
    top: '5%',
    left: 'center',
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      padAngle: 5,
      itemStyle: {
        borderRadius: 10,
      },
      label: {
        show: false,
        position: 'center',
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold',
        },
      },
      labelLine: {
        show: false,
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' },
      ],
    },
  ],
}
</script>

<style lang="scss" scoped>
.top {
  margin-bottom: 16px;
  :deep(.el-card__body) {
    display: flex;
    justify-content: space-between;
    padding: 30px;
    .cardLeft {
      align-items: center;
      display: flex;
      .description {
        height: 80px;
        display: flex;
        justify-content: space-around;
        flex-direction: column;
      }
      h3 {
        font-weight: 600;
        font-size: 16px;
      }
    }
  }
}
.card {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  .el-card {
    width: 24%;
    background: linear-gradient(to bottom right, #8f79c0 0%, #66ccff 100%);
    :deep(.el-card__body) {
      height: 60px;
      position: relative;
      .card-name {
        font-size: large;
        position: absolute;
        left: 20px;
        top: 20px;
      }
      .card-count {
        font-size: larger;
        position: absolute;
        bottom: 20px;
        right: 20px;
      }
    }
  }
}
.echars {
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
}
</style>
